<template>
  <div class="masterReview">
      <div class="titleLogo">
        <img class="logoBright" :src="logoBright" alt="">
        <img class="logoDark" :src="logoDark" alt="">
      </div>

      <!-- nav -->
      <userNav></userNav>
      <!-- nav end-->

      <div class="reviewContant">
        <ul class="navMenu">
          <li v-for="typeList in typeLists" 
            :key='typeList.id' 
            @click="change(typeList.id);getAllData(typeList.id)"  
            :class="{'reviewActive':changeClass == typeList.id}"
            >
              <img :src="typeList.clickBackImg" alt=""  v-if="changeClass == typeList.id">
              <img :src="typeList.defultBackImg" alt="" v-else>
            <p>{{typeList.typeName}}</p>
          </li>
         
        </ul>
        <!-- <div class="reviewNav">
          <div  v-for="typeList in typeLists" :key='typeList.id' 
          :class="{'reviewActive':changeClass == typeList.id}" 
          @click="change(typeList.id);getAllData(typeList.id)" 
          >
            <span>{{typeList.typeName}}</span>
          </div>
        </div> -->

        <div class="reviewLists" v-if="allLists.length > 0">
          <div  class="reviewList" v-for="(allList,index) in allLists " :key='allList.id'>
            <div class="reviewLeft" @mouseenter="allPlay($event)" @mouseleave="allPlay($event)" @click="showModal(allList,index)">
              <video :src="allList.linkAddress" muted></video>
              <img class="play" src="../../static/image/icon-video-play.png" alt="">
            </div>
            <div class="reviewRight">
              <p class="review-title">{{allList.title}}</p>
              <p class="review-label">{{allList.typeName}}</p>
              <p class="review-time">
                <img src="../../static/image/shizhong.png" alt="">{{allList.uploadTime |timeToHM}}
                <span class="liulan"><img src="../../static/image/passege1.png" alt="">{{allList.playCount}}次观看</span>
              </p>
              <p class="review-data">上传时间：{{allList.uploadTime |timeToYMD}}</p>
            </div>
          </div>
        </div>
        <div class="reviewLists" v-else>
          <p class="review-wait">即将推出其他精彩视频，敬请期待！</p> 
        </div>
        
        
        <!-- 视频播放弹框 -->
        <div v-show="modalShow" class="modalVideo">
          <img class="modalImg" src="../../static/image/back.png" @click="closeModalShow()">
          <!-- <img class="modalImg" src="../../static/image/back.png" @click="modalShow = !modalShow"> -->
          <!-- <video id="modal-video" :src="linkAddress" controls autoplay style="width:100%"></video> -->
          <video id="modal-video" :src="linkAddress" controls autoplay style="width:100%"></video>
        </div>
        <!-- 弹框半透明背景 -->
        <div v-show="modalShow" @click="modalShow = !modalShow" class="modalMask"></div>
      </div>
  </div>
</template>
<script>
  import userNav from '../components/userNav.vue'
  export default {
    components:{
      userNav:userNav
    },
    data(){
      return{
        // listShow:'全部',
        // 导航栏样式切换
        changeClass:0,
        logoBright:'../../static/image/logo-marksimos-r.png',
        logoDark:'../../static/image/logo-changeman-r.png',

        modalShow: false,
        linkAddress:'',
        modalVideo:{},
        listVideo:{},
        // 查询视频类型
        typeLists:[],
        // 全部
        allLists:[],
        aType : this.$route.params.videoType,
        aid : this.$route.params.id,
        aLinkAddress : this.$route.params.linkAddress,
      }
    },
    methods:{
      // 导航栏样式切换
      change:function(id){
        this.changeClass = id;
      },
      // 全部
      getAllData:function(id){
        let data = {
          // index: index
          // type:this.typeList.typeId,
          type: id,
          
        };
        console.log(data)
        this.$http.allVideo(data,(res)=>{
          this.allLists = res.data
          console.log(res)
        },(errRes)=>{
          console.log(errRes)
        })
      },
      // 查询视频类型
      getVideoType:function(){
        this.$http.allVideoType(null,(res)=>{
          this.typeLists = res.data;
          console.log(res)
        },(errRes)=>{
          console.log(errRes)
        })
      },
      
      // 鼠标移入移出播放
      allPlay: function (event) {
        this.listVideo = event.currentTarget.firstChild;
        this.listVideo.currentTime = 0;
        if (this.listVideo.paused) {
          this.listVideo.play()
        }else{
          this.listVideo.pause()
        }
      },

      // 点击播放视频 
      showModal: function(allList,index){
        let data={
          id:allList.id
        }
        this.$http.playCount(data,(res)=>{
          // this.allLists 索引和 页面元素数量一致，索引必定一致，根据索引来更改相应位置的次数
          this.allLists[index].playCount = res.data.playCount;
          // console.log(res)
        },(errRes)=>{
          console.log(errRes)
        })
        this.modalVideo = document.getElementById('modal-video')
        this.modalShow = this.modalShow?false:true;
        this.linkAddress = allList.linkAddress
      },
      // 关闭视频弹窗
      closeModalShow:function(){
        this.modalShow = false;
        //location.reload();
      },

      // 首页传id弹视频
      aginShowModal: function(){
        this.modalVideo = document.getElementById('modal-video')
        this.modalShow = this.modalShow?false:true;
        this.linkAddress = this.aLinkAddress
      },      
    },
    watch: {
      modalShow: function(newValue,oldValue){
        console.log(newValue,oldValue)
        this.listVideo.currentTime,this.modalVideo.currentTime = 0
        if (newValue == false) {
          this.modalVideo.muted = true;
        } else {
          this.modalVideo.muted = false;
        }
      }
    },
    created(){

    },
    mounted(){
      // let aType = this.$route.params.videoType;
      // console.log('aType:' + aType)
      // let aId = this.$route.params.id;
      // console.log('aId:' + aId)
      // let aLinkAddress = this.$route.params.linkAddress;
      // console.log('aLinkAddress:' + aLinkAddress)
      //this.getAllData();
      this.getVideoType();
      this.getAllData(0);
      this.aginShowModal();
      
      
    },
  }
</script>

